<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/ai-assistant.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html" class="active">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- AI助手聊天界面 -->
    <section class="chat-section">
        <div class="container">
            <div class="chat-container">
                <div class="chat-header">
                    <div class="chat-title">
                        <img src="../static/avatar1.png" alt="AI助手" class="ai-avatar">
                        <h2>朋知AI助手</h2>
                    </div>
                    <p class="chat-subtitle">您的智能支教顾问，随时为您解答问题</p>
                </div>
                
                <div class="chat-messages" id="chat-messages">
                    <!-- AI欢迎消息 -->
                    <div class="message ai-message">
                        <div class="message-avatar">
                            <img src="../static/avatar1.png" alt="AI助手">
                        </div>
                        <div class="message-content">
                            <p>您好！我是朋知AI助手，很高兴为您服务。您可以向我咨询关于支教的任何问题，例如：</p>
                            <ul class="suggestion-list">
                                <li class="suggestion-item" data-query="如何申请支教？">如何申请支教？</li>
                                <li class="suggestion-item" data-query="支教需要哪些条件？">支教需要哪些条件？</li>
                                <li class="suggestion-item" data-query="如何发布支教需求？">如何发布支教需求？</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="chat-input">
                    <textarea id="message-input" placeholder="请输入您的问题..." rows="1"></textarea>
                    <button id="send-button" class="send-button" disabled>
                        <i class="bi bi-send"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- AI功能介绍 -->
    <section class="ai-features">
        <div class="container">
            <h2 class="section-title">AI助手能做什么</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-question-circle"></i>
                    </div>
                    <h3>智能问答</h3>
                    <p>回答您关于支教的各种问题，包括申请流程、条件要求、注意事项等。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-lightbulb"></i>
                    </div>
                    <h3>个性化推荐</h3>
                    <p>根据您的兴趣、专业和经验，推荐最适合您的支教项目。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-file-earmark-text"></i>
                    </div>
                    <h3>申请指导</h3>
                    <p>提供支教申请材料准备指南，帮助您提高申请成功率。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3>团队匹配</h3>
                    <p>分析您的特长和团队需求，帮助您找到最合适的支教团队。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 用户反馈 -->
    <section class="user-feedback">
        <div class="container">
            <h2 class="section-title">用户反馈</h2>
            <div class="feedback-slider">
                <div class="feedback-card">
                    <div class="feedback-content">
                        <p>"朋知AI助手帮我找到了最适合我的支教项目，解答了我所有的疑问，非常感谢！"</p>
                    </div>
                    <div class="feedback-author">
                        <img src="../static/avatar-default.png" alt="用户头像">
                        <div class="author-info">
                            <h4>张小明</h4>
                            <p>大学生志愿者</p>
                        </div>
                    </div>
                </div>
                <div class="feedback-card">
                    <div class="feedback-content">
                        <p>"作为一名学校负责人，AI助手帮我们快速发布了支教需求，并匹配到了优秀的志愿者团队。"</p>
                    </div>
                    <div class="feedback-author">
                        <img src="../static/avatar-default.png" alt="用户头像">
                        <div class="author-info">
                            <h4>李校长</h4>
                            <p>山区小学校长</p>
                        </div>
                    </div>
                </div>
                <div class="feedback-card">
                    <div class="feedback-content">
                        <p>"AI助手提供的申请指导非常实用，让我的支教申请一次就通过了，推荐给所有想参与支教的朋友！"</p>
                    </div>
                    <div class="feedback-author">
                        <img src="../static/avatar-default.png" alt="用户头像">
                        <div class="author-info">
                            <h4>王芳</h4>
                            <p>在职教师</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/ai-assistant.js"></script>
</body>
</html>